<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #head{
            height: 20000px;

        }

        #nav {
            height: 50px;
            margin: 0 auto;
            border: 1px solid red;
        }
        input {
            height: 20px;

        }
         form {
             height: 20px;
             width: 200px;
             margin: 0 auto;
         }

    </style>
    <script>
        var left=0;
        window.onload=function(){
            var se=document.getElementById("search");
            left=se.offsetLeft;
        }
        //捕捉到滚动的事件
        window.onscroll=function(){
            var x=document.documentElement.scrollLeft||document.body.scrollLeft;
            var y=document.documentElement.scrollTop||document.body.scrollTop;
            console.log("x="+x+",y="+y);
            var se=document.getElementById("search");
            var h=se.offsetTop;

            console.log("left:"+left);
            if(y>=h){
                se.style.position="fixed";
                se.style.left=left+"px";
                se.style.top="5px";
            }else{
                se.style.position="static";
            }
        }
    </script>
</head>
<body>
<div id="head">
    <div id="nav">

    </div>
    <form id="search">
        <input type="text">
    </form>


</div>



</body>
</html>